@forward 'vars';
@use '../../../core/src/styles/vars' as psv;
@use 'vars' as compass;

.psv-container {
    --psv-compass-plugin-loaded: true;
}

.psv-compass {
    position: absolute;
    margin: compass.$margin;
    z-index: psv.$ui-zindex - 1; // under map/plan
    cursor: default;
    aspect-ratio: 1;

    @at-root .psv--has-navbar & {
        margin-bottom: calc(#{psv.$navbar-height} + #{compass.$margin});
    }

    canvas,
    svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    &--top-left,
    &--top-center,
    &--top-right {
        top: 0;
    }

    &--center-left,
    &--center-center,
    &--center-right {
        top: 50%;
    }

    &--bottom-left,
    &--bottom-center,
    &--bottom-right {
        bottom: 0;
    }

    &--top-left,
    &--center-left,
    &--bottom-left {
        left: 0;
    }

    &--top-center,
    &--center-center,
    &--bottom-center {
        left: 50%;
    }

    &--top-right,
    &--center-right,
    &--bottom-right {
        right: 0;
    }
}
